<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video src="../00-assets/videos/clode_notifiy.mp4" hidden controls loop></video>
    <canvas width="800" height="600"></canvas>
    <button>暂停/播放</button>
    <script>
        let canvas = document.querySelector('canvas');
        let btn = document.querySelector('button');
        let ctx = canvas.getContext('2d');

        let video = document.querySelector('video');
        /*
            绘制视频一样是用drawImage
            第一个参数是video本身、第二个和第三个是视频展示的左上角坐标，后面两个是宽高。
        */
        btn.onclick = function(){
            if(video.paused){
                video.play();
            render();
            }
            else{
                video.pause();
            }
        }

        btn.click();

        function render(){
            ctx.drawImage(video,0,0,350,600);
            requestAnimationFrame(render)
        }
            
    </script>
</body>

</html>